<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- element中引入Transter 穿梭框 -->
     <span class="transfer">
        <el-transfer v-model="value" :data="data"></el-transfer>
     </span>
     <br>
     <i class="el-icon-share"></i>
     <i class="el-icon-coffee-cup"></i>
     <i class="el-icon-dessert"></i>
     <br>
     <el-radio-group v-model="direction">
      <el-radio label="ltr">从左往右开</el-radio>
      <el-radio label="rtl">从右往左开</el-radio>
      <el-radio label="ttb">从上往下开</el-radio>
      <el-radio label="btt">从下往上开</el-radio>
    </el-radio-group>

    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
    点我打开
  </el-button>

  <el-drawer
    title="我是标题"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose">
    <span>我来啦!</span>
  </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
     const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data;
      };
    return {
      msg: 'Welcome to Your Vue.js App',
      data: generateData(),
      value: [1, 4],

       drawer: false,
      direction: 'rtl',
    }
  },
   methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.transfer{
  display: block;
  text-align: left;
  width: 600px;
  margin: 0 auto;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
